<template>
    <div>
        <Header :needColor="needColor"></Header>
        <router-view></router-view>
        <DetailWindow :detailInf="detailInf"></DetailWindow>
        <UserWindow :active="userActive"></UserWindow>
    </div>
</template>

<script setup>
import Header from '@/components/Header.vue'
import DetailWindow from '@/components/DetailWindow.vue'
import UserWindow from '@/components/UserWindow.vue';
import { provide, ref, reactive } from 'vue'
const needColor = ref(false)
const setNeedColor = (bool) => {
    needColor.value = bool
    console.log(needColor.value);
}
const updateDetail = (detail) => {
    // detailInf = { ...detail }
    detailInf.active = !detailInf.active
    detailInf.inf = detail
    console.log(detailInf);

}

const userActive = ref(false)
const setUserActive = (bool) => {
    userActive.value = bool
}
let detailInf = reactive({ active: false, detail: {} })
provide('detailInf', { detailInf, updateDetail, needColor, setNeedColor })
provide('userActive', { userActive, setUserActive })
</script>